<template>
    <div>
        <el-dialog width="1200px" v-el-drag-dialog title="选择一个符合您需求的类型" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
            <div class="flex flex-wrap flex-cag-box">
                <div v-for="category in oneCategoryList">
                    <div @click="chooseCategoryId(category.categoryId)" class="mission-type flex v-align-c align-c" style="width: 200px"
                         :class="categoryId===category.categoryId?'sel-mission-type':''">
                        <template v-if="categoryId == category.categoryId">
                            <img :src="category.selectImageUrl">
                        </template>
                        <template v-else>
                            <img :src="category.noSelectImageUrl">
                        </template>
                        <div class="pad-l-10 font-24" style="align: center;">{{category.categoryName}}</div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="align-c pad-25">
                <el-button type="primary" class="next-step-btn" @click="saveData">下一步，快速完善需求信息</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style>
    .mission-type {
        padding: 30px 20px;
        min-width: 150px;
        border: 1px solid #dcdcdc;
        border-radius: 8px;
        margin-bottom: 40px;
        margin-right: 45px;
        cursor: pointer;
        text-align: center;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    .flex-cag-box{
        padding: 20px 110px;
    }
    .next-step-btn{
        padding: 13px 35px;
        font-size: 18px;
    }

    .sel-mission-type {
        background-color: #409eff;
        color: #fff;
    }

    .budget-el-select {
        padding-top: 10px;
        padding-left: 50px;
    }
</style>
<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import { getTaskOneCategoryList } from '@/api/project/taskInfo'
  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        oneCategoryList: [],
        categoryId: null, // 跳转页面要用的类目Id
        dialogFormVisible: false, // 是否显示弹板,
        pageType: ''
      }
    },
    created: function() {
      // this.categoryId = this.oneCategoryId
    },
    mounted: function() {
      this.listener()
      this.initTaskInfoCategory()
      this.categoryId = this.oneCategoryId
    },
    methods: {
      listener() {
        const that = this
        this.$bus.$on('project.task.edit.taskInfoCategory.show', function(e) {
          that.pageType = e
          that.dialogFormVisible = true
        })
        this.$bus.$on('project.task.edit.taskInfoCategory.categoryId', function(categoryId) {
          that.categoryId = categoryId
        })
      },
      initTaskInfoCategory() {
        getTaskOneCategoryList().then(response => {
          this.oneCategoryList = response.data
        })
      },
      handleDialogClose() {
        this.dialogFormVisible = false
      },
      // 选择对应的类目Id
      chooseCategoryId: function(key) {
        this.categoryId = key
      },
      // 保存
      saveData: function() {
        const that = this
        const categoryId = this.categoryId
        if (categoryId === null) {
          this.$message({
            message: '请选择一个符合需求的类型',
            type: 'error'
          })
        } else {
          this.oneCategoryList.forEach(category => {
            if (category.categoryId + '' === that.categoryId + '') {
              if (this.pageType === 'add') {
                this.$bus.$emit('project.task.components.task-category-add', category)
              } else if (this.pageType === 'edit') {
                this.$bus.$emit('project.task.components.task-category-edit', category)
              }
              that.dialogFormVisible = false
              return
            }
          })
        }
      }
    }
  }
</script>
